<template>
  <div class="main">
    <div class="header">
      <el-input
          placeholder="请输入关键词"
          @focus="handleSearch"
          class="search"
      >
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div class="body">
      <van-swipe :autoplay="3000" loop class="swiper-container" v-if="bannerList && bannerList.length>0">
        <template>
          <van-swipe-item v-for="(item, index) in bannerList" :key="index" @click="gotoGoodsDetail(item)">
            <!-- <img class="swiper-image" :src="store.state.imgUrl+item.picture" alt="Banner Image"> -->
            <!-- <div class="swiper-image" :style="{ backgroundImage: `url(${store.state.imgUrl +item.picture}` }"></div> -->
            <van-image class="swiper-image" :src="store.state.imgUrl+item.picture">
              <template v-slot:loading>
                <van-loading type="spinner" size="20"/>
              </template>
            </van-image>
          </van-swipe-item>
        </template>
      </van-swipe>
      <div class="tab-container">
        <van-tabs v-model="active" :ellipsis="false">
          <van-tab :title="obj.name" v-for="obj in channels" :key="obj.id">
            <!--            <div class="tab-arrow"></div>-->
            <!-- 商品列表 -->
            <keep-alive>
              <shop-list :obj="obj"></shop-list>
            </keep-alive>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";
import ShopList from './components/shopList'
import {getBannerList, queryTypeList} from "../../api/shopping";
import store from '../../store'
import {login} from "../../api/share";

export default {
  name: "Shopping.vue",
  components: {ShopList},
  data() {
    return {
      store: store,
      keyWord: '',
      bannerList: [
        {imageUrl: require('@/assets/shopping/zwt.png')},
      ],
      zwt: require('@/assets/shopping/zwt.png'),
      active: 0,
      channels: [],
    }
  },
  async mounted() {
    //用于模拟登录 申请H5账号
    // let loginForm = {
    //   username: '13386483290',
    //   password: '13386483290',
    //   randomStr: 'blockPuzzle',
    //   code: ''
    // }
    // await this.loginByUsername(loginForm)
    // window["getInfoFromFlutter"] = (info) => {
    //   this.getInfoFromFlutter(info);
    // };
    this.getBannerList()
    this.queryTypeList()
  },
  methods: {
    getInfoFromFlutter(info) {
      // 2、解析传过来的值
      let data = JSON.parse(info);
      if (data.action == "init" && data.param && data.param.token) {
        // 3、存储到store里
        this.token = data.param.token;
        this.$store.commit("SET_TOKEN", data.param.token);
      } else {
        this.$toast.fail("token获取失败");
      }
    },
    // userSearchApi() {
    //   debugger
    //   let data = {
    //     username: '13386483290 ',
    //     password: '13386483290'
    //   }
    //   return new Promise(resolve => {
    //     login(data).then(res => {
    //       console.log('aaaaa', res)
    //     })
    //   })
    // },
    loginByUsername(loginForm) {
      this.$store.dispatch('LoginByUsername', loginForm).then(() => {
        // this.$router.push({path: this.tagWel.value})
        this.getBannerList()
        this.queryTypeList()
      })
    },
    gotoGoodsDetail(item) {
      this.$store.dispatch('shopping/setDetailId', item.goodsId)
      console.log('skuId', item.skuId)
      this.$store.dispatch('shopping/setSkuId', item.skuId)
      this.$router.push({path: "/detail"});
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    getBannerList() {
      let data = {
        shopId: ''
      }
      getBannerList(data).then(res => {
        console.log('banner', res.data.records)
        this.bannerList = res.data.records
      })
    },
    queryTypeList() {
      queryTypeList().then(res => {
        console.log(res)
        this.channels = res.data
      })
    },
    handleSearch() {
      this.$router.push({path: "/searchShopping"});
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    gotoOrder() {
      this.$router.push({path: "/writeOrder"});
    }
  }
}
</script>

<style scoped lang="less">
.main {
  //width: 100%;
  //background: rgba(247, 247, 247, 1);
  //height: 100vh;
  //overflow-y:scroll;
  .header {
    z-index: 999;
    background: rgba(242, 150, 0, 1);
    font-size: 15px;
    padding: 10px 10px;
    height: 32px;
    line-height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;

    .search {
      width: 343px;
      //margin-left: 11px;
    }

    //img {
    //  width: 42px;
    //  height: 42px;
    //}

    /deep/ .el-input .el-input__inner {
      border-radius: 15.5px;
    }
  }

  .body {
    padding: 15px;
    height: 100vh;
    overflow-y: scroll;
    //background: #f7f7f7;
    .swiper-container {
      //width: 352px;
      height: 148px;
      //height: 200px;
      //margin-bottom: 20px;
    }

    .swiper-image {
      width: 100%;
      height: 100%;
      opacity: 1;
      border-radius: 13px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    .tab-container {
      position: relative;

      .tab-arrow {
        position: absolute;
        top: 0%;
        left: 0;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: #f00; /* 箭头的颜色 */
        /* 箭头样式，可以使用 CSS 三角形技术实现 */
      }
    }

    /deep/ .van-tabs__line {
      background: rgba(242, 150, 0, 1);
      width: 23px;
      height: 2px;
    }

    /deep/ .van-nav-bar__content {
      height: 48px;
      // 标题
      .van-nav-bar__title {
        // 不要默认设置最大宽度
        //max-width: unset;
        font-size: 14px;
      }
    }

    /deep/ .van-tabs--line .van-tabs__wrap {
      height: 44px;
    }

    /deep/ .van-tab--active {
      color: rgba(242, 150, 0, 1) !important;
    }

    /deep/ .van-tab {
      font-weight: 500;
      font-size: 18px;
      color: rgba(128, 128, 128, 1);
      text-align: center;
    }

    /deep/ .van-tabs__nav--line.van-tabs__nav--complete {
      //background: rgba(247, 247, 247, 1);
    }


  }
}
</style>
